Integrating with Google Maps using HTML5 SDK |
|
You can integrate your application with Google Maps using the Cordys HTML5 SDK. Refer to Getting Started with the SDK for information on getting started with the SDK.
This example displays the location of an employee on a mobile device using Google Maps. It lists all the employees in the Northwind Database and upon selecting a particular employee, a details page is displayed with the address and location of the employee plotted on Google Map.
A Geocoder API is used here to convert an address into a LatLng object, which is used to create a map. Although only the Address is used as a parameter, you can also pass other parameters to specify a better search. Refer to Google API documentation for more information. The search done in the previous step results in an array of objects or locations that are close to the address mentioned. To simplify, only the first result is considered in this example and is displayed on the Map. However, you may use more than one parameter. In addition to this, you must explicitly use the Marker API to add the mark pointing to the place selected.
Refer to Google Maps Javascript API V3 Reference for more information on these APIs.
The example provided here is similar to employeeswithlocation.htm that is available under the demo folder in the Process Platform HTML5 SDK. Refer Sample Pages, for more information on other Demo pages shipped with the SDK.
<!DOCTYPE html> <html> <head> <title>Employees</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="/cordys/thirdparty/jquery/cordys.min.css" type="text/css" /> <link rel="stylesheet" href="/cordys/thirdparty/jquery/jquery.mobile.structure.min.css" type="text/css" /> <script src="/cordys/thirdparty/jquery/jquery.js" type="text/javascript"></script> <script src="/cordys/thirdparty/jquery/jquery.mobile.min.js" type="text/javascript"></script> <script src="/cordys/thirdparty/knockout/knockout.js" type="text/javascript"></script> <script src="/cordys/html5/cordys.html5sdk.js" type="text/javascript"></script> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var empModel; // Reference to the model $(function() { ko.bindingHandlers.photo = { update: function(element, valueAccessor) { var value = valueAccessor(); if (value) { element.src = 'data:image/bmp;base64,' + value.substring(104); } else { element.src="/cordys/html5/demo/images/defaultphoto.jpg"; } } }; $("#detailsPage").bind("pageshow",function(){ refreshPage(); //shows the employee's location on the google map initializeMap(); }) // Create a new model empModel = new $.cordys.model({ objectName: "Employees", // Name of the Business Object context : document.body, // Where the data has to be bound to read: { // Settings for the read method namespace: "http://schemas.cordys.com/NW", dataType: "json", method: "GetEmployeesObjects", // Parameters for the method parameters: { fromEmployeeID: "0", toEmployeeID: "99" } } }); // Call the read method. This would fire the method with the namespace and parameters as specified in the read settings above. empModel.read(); }); // Called on clicking an Employee function selectEmployee(emp) { return function(data) { // Let us set the currently clicked item as the selected item to show in the detail page empModel.selectedItem(data); return true; } } function refreshPage() { var employeeListView = $('#detailView'); employeeListView.trigger("create"); employeeListView.listview("refresh"); } </script> </head> <body> <div data-role="page" id="mainPage"> <div data-role="header" data-theme="b"> <h1>Employees</h1> </div> <div data-role="content" data-theme="b"> <ul id="employeeList" data-role="listview" data-theme="c" data-inset="true" data-bind="foreach:Employees"> <li> <a href="#detailsPage" data-transition="pop" class="ui-link-inherit" data-bind="click:selectEmployee($data)"> <img class="ui-li-thumb ui-corner-tl" data-bind="photo:Photo"/> <h3 class="ui-li-heading"><span data-bind="text:FirstName"></span> <span data-bind="text:LastName"></span></h3> <p class="ui-li-desc" data-bind="text:Address"></p> <p class="ui-li-desc"><span data-bind="text:City"></span> <span data-bind="text:Country"></span></p> </a> </li> </ul> </div> </div> <div data-role="page" id="detailsPage"> <div data-role="header" data-theme="b"> <a href="#mainPage" data-role="button" data-icon="back" data-rel="back">Back</a> <h1>Employee Location</h1> </div> <div data-role="content" data-theme="c"> <ul data-role="listview" id="detailView" data-bind="with: selectedItem"> <li> <div> <a class="ui-link-inherit"> <img class="ui-li-thumb ui-corner-tl" data-bind="photo:Photo"/> <h2 class="ui-li-heading" data-bind="text:EmployeeID"></h2> <h3 class="ui-li-heading"><span data-bind="text:TitleOfCourtesy"></span> <span data-bind="text:FirstName"></span> <span data-bind="text:LastName"></span></h3> <p class="ui-li-desc"><span data-bind="text:Title"></p> </a> </div> </li> <li data-role="fieldcontain"> <div id="employeeDiv"> <div > <label for="fldAddress" class="ui-input-text">Address</label> <input readonly type="text" id="Address" data-bind="value:Address + ', ' + City + ', ' + Country" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"/> </div> </div> </li> <li data-role="fieldcontain"> <div> <div > <label for="map_canvas" class="ui-input-text">Location</label> </div> <div> <div id="map_canvas" style="width:100%; height:500px"></div> </div> </div> </li> </ul> </div> </div> <script> function initializeMap() { var address = $('#Address').val(); // a new google maps object is created to handle the request and we pass the address to it var geoCoder = new google.maps.Geocoder(address) // a new object for the request I called "request" , you can put there other parameters to specify a better search (check google api doc for details) , // on this example im going to add just the address var request = {address:address}; // I make the request geoCoder.geocode(request, function(result, status){ // as a result i get two parameters , result and status. // results is an array tha contenis objects with the results founds for the search made it. // to simplify the example i take only the first result "result[0]" but you can use more than one if you want // So , using the first result I need to create a latlng object to be pass later to the map var latlng = new google.maps.LatLng(result[0].geometry.location.lat(), result[0].geometry.location.lng()); // some initial values to the map var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; // the map is created with all the information var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); // an extra step is needed to add the mark pointing to the place selected. var marker = new google.maps.Marker({position:latlng,map:map,title:'title'}); }) } </script> </body> </html>